<template>
  <ul>
    <li class="history_list" v-for="(item,key) in historylist" :key="key">
      <span v-on:click="backinput(item.keywords)">{{item.keywords}}</span>
      <span v-on:click="deletehistory(item.id)"> x </span>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'HistoryList',
  props: {
    historylist: {
      type: Array
    },
    historylistlength: {
      type: Number | String
    }
  },
  methods: {

    deletehistory (e) {
     this.$emit("listerson",e)
    },


    backinput (e) {
      this.$emit('getinput', e)
    }

  },
  mounted () {
    console.log(this.historylist)
  }
}
</script>

<style lang="less" scoped>
  ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  .history_list{
    margin-bottom: 5px;
    padding: 7px 10px;
    background: #f4f4f4;
    border-radius: 13px;
    margin-left: 5px;
  span:last-child{
    margin-left: 5px;
    font-size: 16px;
  }
  }
  }
</style>
